<!-- 小窝页面 -->
<template>
  <div>
    <!-- 设置栏 -->
    <div>
      <div class="s30153804">
        <span class="s-3613cfc6" style="float: right">
          <img alt="" title="" src="https://image.hongbeibang.com/FthUBRvh6uWFq7omAeGtn8A-0E4s?48X48&amp;imageView2/1/w/48/h/48" class="s-6a5cf0dc" />
        </span>
      </div>
      <div class="s7e1f0f36"></div>
    </div>
    <!-- 展示栏 -->
    <div style="background-color: #f5f7f9">
      <!-- 用户信息 -->
      <div class="s-86ee15c">
        <!-- 用户头像 -->
        <div class="s623419f9">
          <div class="s-1c89ddc8">
            <img
              alt=""
              title=""
              src="https://image.hongbeibang.com/FrAR_Wgqzt2OyWGTfI8pkM6s1jl6?132X132&amp;imageView2/1/w/132/h/132"
              class="s33fa2c34"
              style="background: none; width: 78px; height: 78px"
            />
          </div>
        </div>
        <!-- 昵称/等级 -->
        <div class="s-2325e9ee">
          <!-- 展开图标 -->
          <div class="s898183f">
            <div class="s7cc32b69"></div>
            <div class="s-2839e077">
              <img
                alt=""
                title=""
                src="https://image.hongbeibang.com/Fr2noR6eeftUXEWQp5xx3DZjUj16?94X94&amp;imageView2/1/w/46/h/46"
                class="s-34f4f4a1"
                style="background: none; width: 23px; height: 23px"
              />
            </div>
          </div>
          <!-- 昵称 -->
          <div class="s671d088c">
            <span class="s-538193fa">红枫叶🍁</span>
            <span class="s6af525a3">
              <img
                alt=""
                title=""
                src="https://image.hongbeibang.com/FmFlZjZn6BHHnqrYVMz6MGecwc0J?200X200&amp;imageView2/1/w/50/h/50"
                class="s-34f4f4a1"
                style="background: none; width: 25px; height: 25px"
              />
            </span>
          </div>
          <!-- ID值 -->
          <div class="s-436e853">ID：ye0p20221009222421096</div>
          <!-- 经验值 -->
          <div class="s-48e6e3cc">
            <div class="s-603e44e">经验值：20/100</div>
            <div class="s-3b3bd440"><div style="width: 20%" class="s-cd4d39e"></div></div>
          </div>
        </div>
        <!-- "关注" "粉丝" "帮贡" -->
        <div class="s754429f8">
          <div class="s2ca2514e">
            <div class="s-3c01e14a">0</div>
            <div class="s-766eee6">关注</div>
          </div>
          <div class="s2ca2514e">
            <div class="s-3c01e14a"><span>0</span></div>
            <div class="s-766eee6">粉丝</div>
          </div>
          <div class="s2ca2514e">
            <div class="s-3c01e14a"><span>20</span></div>
            <div class="s-766eee6">帮贡</div>
          </div>
        </div>
      </div>
      <!-- 功能栏 -->
      <div class="s-1522ea4a">
        <ConStr v-for="i in constrs" :key="i.id" :constr="i"></ConStr>
      </div>
      <!-- 更多功能 -->
      <div style="margin: 10px auto">
        <div class="s1c341519">
          <MoreFunc v-for="i in morefuncs1" :key="i.id" :morefunc="i"></MoreFunc>
        </div>
      </div>
      <div class="s1c341519">
        <MoreFunc v-for="i in morefuncs2" :key="i.id" :morefunc="i"></MoreFunc>
      </div>
    </div>
  </div>
</template>

<script>
import ConStr from '@/components/client/ConStr.vue'
import MoreFunc from '@/components/client/MoreFunc.vue'
export default {
  components: { ConStr, MoreFunc },
  data() {
    return {
      constrs: [
        { id: 0, icon: require('../assets/Client/product.jpg'), name: '作品' },
        { id: 1, icon: require('../assets/Client/recipe.jpg'), name: '食谱' },
        { id: 2, icon: require('../assets/Client/collect.jpg'), name: '收藏' },
        { id: 3, icon: require('../assets/Client/issue.jpg'), name: '问题' },
      ],
      morefuncs1: [
        { id: 0, icon: require('../assets/Client/medal.jpg'), name: '勋章库' },
        { id: 1, icon: require('../assets/Client/wondactive.jpg'), name: '精彩活动' },
        { id: 2, icon: require('../assets/Client/sign.jpg'), name: '每日签到' },
        { id: 3, icon: require('../assets/Client/course.jpg'), name: '我的课程' },
      ],
      morefuncs2: [
        { id: 0, icon: require('../assets/Client/record.jpg'), name: '浏览记录' },
        { id: 1, icon: require('../assets/Client/inte.jpg'), name: '达人申请' },
        { id: 2, icon: require('../assets/Client/redeem.jpg'), name: '帮贡兑换' },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
// 设置栏
.s30153804 {
  background: #ffffff;
  height: 44px;
  z-index: 6;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 18px;
  margin: 0 auto;
  max-width: 600px;
  box-sizing: border-box;
}
.s-3613cfc6 {
  font-size: 0;
  height: 44px;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  position: relative;
  z-index: 1;
}
.s-6a5cf0dc {
  width: 27px;
  height: 27px;
  margin: 9.5px 0;
}
.s7e1f0f36 {
  height: 44px;
  overflow: hidden;
  zoom: 1;
}
/* 用户信息 */
.s-86ee15c {
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
  zoom: 1;
  z-index: 2;
}
// 用户头像
.s623419f9 {
  margin: 0 15px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  float: left;
}
.s-1c89ddc8 {
  width: 100%;
  height: 100%;
  font-size: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.s33fa2c34 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid;
  border-color: #e7e2e5;
}
//昵称/等级
.s-2325e9ee {
  overflow: hidden;
  position: relative;
  margin-right: 15px;
}
//展开图标
.s898183f {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -11px;
  z-index: 3;
}
.s7cc32b69 {
  width: 80px;
  height: 23px;
  line-height: 23px;
  font-size: 12px;
  color: #999999;
  display: inline-block;
  vertical-align: middle;
}
.s-2839e077 {
  height: 23px;
  width: 23px;
  font-size: 0;
  display: inline-block;
  vertical-align: middle;
}
.s-34f4f4a1 {
  width: 100%;
  overflow: hidden;
}
// 昵称
.s671d088c {
  position: relative;
}
.s-538193fa {
  max-width: 46%;
  height: 28px;
  line-height: 28px;
  display: inline-block;
  vertical-align: middle;
  color: #4a4945;
  font-size: 20px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -otext-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  white-space: nowrap;
}
// 图标
.s6af525a3 {
  width: 25px;
  height: 25px;
  font-size: 0;
  display: inline-block;
  vertical-align: middle;
  margin-left: 7px;
}
// ID值
.s-436e853 {
  font-size: 12px;
  line-height: 16px;
  color: #999999;
  margin: 4px 0 10px 0;
}
// 经验值
.s-48e6e3cc {
  height: 21px;
  width: 150px;
  margin: 0;
  overflow: hidden;
  position: relative;
}
.s-603e44e {
  margin: 0;
  font-size: 10px;
  line-height: 14px;
  color: #999999;
  margin-bottom: 5px;
}
.s-3b3bd440 {
  position: relative;
  width: 150px;
  height: 4px;
  background-color: #eeedeb;
  margin: 0;
  border-radius: 5px;
  overflow: hidden;
}
.s-cd4d39e {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 1%;
  height: 4px;
  border-radius: 5px;
  background-color: #1976d2;
}
// "关注" "粉丝" "帮贡"
.s754429f8 {
  margin: 20px 37px;
  box-sizing: border-box;
  position: relative;
  border-bottom: 1px solid;
  border-bottom-color: #e7e2e5;
}
.s2ca2514e {
  width: 33.333%;
  height: 30px;
  margin: 5px 0;
  padding: 0 6px;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  border-right: 1px solid;
  border-right-color: #e7e2e5;
  text-align: center;
}
.s2ca2514e:last-child {
  border: none;
}
.s-3c01e14a {
  font-size: 14px;
  color: #4a4945;
  line-height: 20px;
  margin-top: -5px;
  position: relative;
}
.s-766eee6 {
  font-size: 11px;
  color: #999999;
  line-height: 15px;
}
//功能栏
.s-1522ea4a {
  background-color: #ffffff;
  height: 65px;
  padding-bottom: 9px;
}
//更多功能
.s1c341519 {
  background-color: #ffffff;
  margin: 0 auto;
  padding: 0 0 0 15px;
}
</style>